<script>
export default {
    methods: {
        goBack() {
            this.$router.back();
        }
    }
}
</script>
<template>
    <div class="top-bar-wrap">
        <slot name="left">
            <div class="top-bar-back" @click="goBack">
                <image class="back-icon" src="http://s1.mi.com/m/images/m/icon_back_n.png"></image>
                <text class="top-bar-back-txt">返回</text>
            </div>
        </slot>
        <slot></slot>
        <slot name="right"></slot>
    </div>
</template>
<style scoped>
.top-bar-wrap {
    width: 750px;
    height: 80px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ccc;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.top-bar-back {
    width: 120px;
    height: 80px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.back-icon {
    width: 35px;
    height: 35px;
}

.top-bar-back-txt {
    font-size: 28px;
    color: #999;
    text-align: center;
}
</style>
